<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见问题 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../../../layui/css/layui.css"   media="all">
  <link rel="stylesheet" href="../../../css/Global.css"  media="all">
  
</head>
<body>
<div class="layui-header header header-doc">
  <div class="layui-main">
    <a class="logo" href="../../index.html">
      <img src="../../../res/logo.png" alt="layui">
    </a>
    <ul class="layui-nav">
      <li class="layui-nav-item layui-this">

      </li>
      <li class="layui-nav-item ">

      </li>
      
      <li class="layui-nav-item">

      </li>
    </ul>
  </div>
</div>
<ul class="site-dir">
  <li><a href="#use"><cite>应该如何加载组件</cite></a></li>
  <li><a href="#jquery"><cite>如何使用内部jQuery</cite></a></li>
  <li><a href="#form"><cite>为什么表单不显示</cite></a></li>
  <hr>
  <li><a href="#compress"><cite>哪里有未压缩源代码</cite></a></li>
  
  <li><a href="#other"><cite>还是遇到困难咋办？</cite></a></li>
</ul>
<div class="layui-main site-inline">
  <div class="site-tree">
  <ul class="layui-tree">
  
    <li><h2>基础说明</h2></li>
  
    <li class="site-tree-noicon ">
      <a href="../index.html" ><cite>开始使用</cite></a>
    </li>
    <li class="site-tree-noicon ">
      <a href="infrastructure.html" >
        <cite>底层支撑</cite>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="element.html" >
        <cite>页面元素</cite>
        <em>规范 / 公共类、属性</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="modules.html" >
        <cite>组件规范</cite>
        <em>使用 / 模块扩展</em>
      </a>
    </li>
    <li class="site-tree-noicon layui-this">
      <a href="faq.html">
        <cite>常见问题</cite>
      </a>
    </li>
    
    <li><h2>页面元素</h2></li>
    
    
    
    <li class="site-tree-noicon ">
      <a href="../element/color.html">
        <cite>颜色</cite>
        <em>内置的色值参考</em>
      </a>
    </li>
    
    <li class="site-tree-noicon ">
      <a href="../element/icon.html">
        <cite>图标</cite>
        <em>字体图标</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/auxiliar.html">
        <cite>辅助</cite>
        <em>引用 / 分块 / 横线…</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/button.html" >
        <cite>按钮</cite>
        <em>button组</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/form.html">
        <cite>表单</cite>
        <em>form元素集合</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/nav.html">
        <cite>导航</cite>
        <em>菜单 / Tab / 面包屑 …</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/table.html">
        <cite>表格</cite>
        <em>table - v1.0.5 新增</em>
      </a>
    </li>
   
    
    <li><h2>内置组件</h2></li>
    
    <li >
      <a href="../modules/layer.html">
        <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
        <em>layer</em>
      </a>
    </li>
    <li >
      <a href="../modules/layim.html">
        <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
        <cite>即时通讯</cite>
        <em>layim</em>
      </a>
    </li>
    <li >
      <a href="../modules/laydate.html">
        <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期时间选择</cite>
        <em>laydate</em>
      </a>
    </li>
    <li >
      <a href="../modules/laypage.html">
        <i class="layui-icon">&#xe633;</i><cite>分页</cite>
        <em>laypage</em>
      </a>
    </li>
    <li >
      <a href="../modules/laytpl.html">
        <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
        <em>laytpl</em>
      </a>
    </li>
    <li >
      <a href="../modules/layedit.html">
        <i class="layui-icon">&#xe639;</i>
        <cite>富文本编辑器</cite>
        <em>layedit</em>
      </a>
    </li>
    <li >
      <a href="../modules/form.html">
        <i class="layui-icon" style="top: 2px;">&#xe63c;</i>
        <cite>表单</cite>
        <em>form</em>
      </a>
    </li>
    <li >
      <a href="../modules/upload.html">
        <i class="layui-icon">&#xe62f;</i>
        <cite>文件上传</cite>
        <em>upload</em>
      </a>
    </li>
    <li >
      <a href="../modules/element.html">
        <i class="layui-icon" style="top: 1px; font-size: 18px;">&#xe62a;</i>
        <cite>常用元素操作</cite>
        <em>element</em>
      </a>
    </li>
    <li >
      <a href="../modules/tree.html">
        <i class="layui-icon">&#xe62e;</i>
        <cite>树形菜单</cite>
        <em>tree</em>
      </a>
    </li>
    
    <li >
      <a href="../modules/util.html">
        <i class="layui-icon">&#xe631;</i>
        <cite>工具块</cite>
        <em>util</em>
      </a>
    </li>
    <li >
      <a href="../modules/flow.html">
        <i class="layui-icon">&#xe636;</i>
        <cite>流加载</cite>
        <em>flow</em>
      </a>
    </li>
    <li >
      <a href="../modules/code.html">
        <i class="layui-icon" style="top: 1px;">&#xe635;</i>
        <cite>代码修饰器</cite>
        <em>code</em>
      </a>
    </li>
  </ul>
</div>

  <div class="site-content">
    <h1 class="site-h1">常见问题</h1>
    
    <blockquote class="layui-elem-quote">
      本篇将主要讲解使用过程中普遍遇到的“问题”，这些问题并非是BUG，通常是需要我们自己去注意的一些点。（会结合用户反馈持续补充）
    </blockquote>
    
    
<div style="margin: 15px 0; text-align: center; background-color: #F2F2F2;">
  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="9841027833"></ins>
</div>

    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="use">应该如何加载组件最科学？</a></legend>
    </fieldset>
    <div class="site-text">  
      <p>
        事实上我们在<em>组件规范</em>已经有明确地说明，你可以采用预先加载和按需加载两种模式，但后者我们并不推荐（文档也解释原因了）。因此我们强烈推荐的方式是：你应该在你js文件的代码最外层，就把需要用到的组件 layui.use以下，如：
      </p>
      <pre class="layui-code" lay-title="JavaScript">
/**
  你的js文件
**/
 
//我们强烈推荐你在代码最外层把需要用到的组件先加载
layui.use(['layer', 'form', 'element'], function(){
  var layer = layui.layer
  ,form = layui.form()
  ,element = layui.element()
 
  //……
  //你的代码都应该写在这里面
});
      
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="jquery">如何使用内部jQuery？</a></legend>
    </fieldset>
    <div class="site-text">  
      <p>
        由于Layui部分内置组件依赖jQuery，所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块（唯一的一个第三方模块）。只有你所使用的组件有依赖到它，它才会加载，并且如果你的页面已经script引入了jquery，它并不会重复加载。内置的jquery模块去除了全局的$和jQuery，是一个符合layui规范的标准模块。所以你必须通过以下方式得到：
      </p>
      <pre class="layui-code" lay-title="JavaScript">
//主动加载jquery模块
layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.jquery //重点处
  ,layer = layui.layer;
  
  //后面就跟你平时使用jQuery一样
  $('body').append('hello jquery');
});
 
//如果内置的组件本身是依赖jquery，你无需去use jquery，所以上面的写法其实可以是：
layui.use('layer', function(){ 
  var $ = layui.jquery //由于layer弹层依赖jQuery，所以可以直接得到
  ,layer = layui.layer;
 
  //……
});
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="form">为什么表单不显示？</a></legend>
    </fieldset>
    <div class="site-text">  
      <p>
        当你使用表单时，Layui会对select、checkbox、radio等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于form组件，所以你必须加载 <em>form</em>，并且执行一个实例。值得注意的是：导航的Hover效果、Tab选项卡等同理（它们需依赖 <em>element</em> 模块）
      </p>
      <pre class="layui-code" lay-title="JavaScript">
layui.use('form', function(){
  var form = layui.form(); //只有执行了这一步，部分表单元素才会修饰成功
  
  //……
});      
      </pre>
    </div>
    
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="compress">Layui 哪里有未压缩源代码？</a></legend>
    </fieldset>
    <div class="site-text">  
      <p>
        有部分猿吐槽说：你们丫的不是张口闭口开源开源吗？怎么我下载的包里的代码是压缩过的，源代码呢？
      </p>
     <p>  
      针对这类问题，很有必要解释一下。Layui项目的开源是毋庸置疑的，我们的全部代码托管在GitHub（你可以通过首页的Star进入）。之所以在下载包里没有提供未压缩的源代码，是为了避免一些猿的使用混淆，因为之前有遇到过部分可爱到极致的猿，居然同时引入了压缩过和未压缩过的layui.js，虽然文档在“开始使用”中有相关的明确说明，但这种问题仍然不是个例，<em>使得我欲哭无泪啊啊啊</em>，但毕竟我们要做“中国最容易使用的UI框架”，所以俺忍了。因此才决定只对下载包提供我们构建后的代码，并且，由于是经过了压缩、合并等处理，所以更适合用于生产环境。
      </p>
      
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="other">还是遇到困难咋办？</a></legend>
    </fieldset>
    
    <blockquote class="layui-elem-quote layui-quote-nm">
      <p class="site-text">可以继续看看这个：<a href="../../../fly.layui.com/jie/5366.html"  target="_blank">layui 常见问题的处理和实用干货集锦</a></p>
      但我还是不会用怎么办？我还是遇到困难怎么办？
      <br>首先，多看文档啊亲！那可是作者一个字节一个字节撸出来的，求珍惜。你抽出一定时间仔细阅读文档，后面只会节省更多时间！
      <br>其次，实在无解，就请在社区反馈吧。你也可以自己组织QQ群，在社区神马的地方拉一些Layui的小伙伴，相互交流噢！
    </blockquote>
    
    <div class="layui-elem-quote">
  <p>Layui - 用心与你沟通</p>
</div>
    
  </div>
</div>
  
<div class="layui-footer footer footer-doc">
  <div class="layui-main">
    <p>2017 &copy; <a href="../../index.html">layui.com</a> MIT license</p>
    <p>
      <a href="../../../fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
      <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
      <a href="mailto:xianxin@layui.com">合作联系</a>
      <a href="../../../github.com/sentsin/layui/index.html" target="_blank">Git仓库</a>
      <a href="../../../fly.layui.com/jie/2461.html"  target="_blank">微信公众号</a>
    </p>
  </div>
</div>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../../../layui/layui.js" charset="utf-8"></script>
<script src="../../Js/doc.js" type="text/javascript"></script>

</body>
</html>